<!-- 打印机管理 -->
<template>
  <div class="">
    <div class="fz-16 fw-6">当前活动：{{ activityInfo.title }}</div>
    <div class="_mt-10 _mb-10">
      <a-button type="primary" @click="handleShowAddModal({}, 'add')">添加签到码（绑定打印机）</a-button>
      <span class="_ml-10">打印机状态为不可用时可能的原因有：打印机未开机、无USB插入、纸尽、开盖未关闭、高温等；</span>
    </div>

    <s-table size="default" ref="table" rowKey="userId, title" :columns="columns" :rowSelection="null" :data="loadData">
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>

      <!--  打印样式 -->
      <span slot="printStyle" slot-scope="text">
        <DictTag v-if="text || text === 0" :options="Dict.getLocal('PrintStyleDefDict')" :value="text" isText />
        <span v-else>--</span>
      </span>

      <!--  打印机状态 -->
      <span slot="terimalStatus" slot-scope="text, record">
        <DictTag
          v-if="record.device"
          :options="Dict.getLocal('terimalStatusDict')"
          :value="record.device.terimalStatus"
          isText
        />
      </span>

      <!-- 活动状态 -->
      <!-- <span slot="activityStatus" slot-scope="text">
        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
      </span> -->
      <div slot="action" slot-scope="text, record" class="disFlxAC flexWrap">
        <a-button type="primary" ghost size="small" class="_mr-5" @click="handleShowAddModal(record, 'edit')">
          编辑
        </a-button>
        <a-button type="primary" ghost size="small" class="_ml-10" @click="$refs.qrCodeModalRef.openModel(record)">
          下载二维码
        </a-button>
        <a-button
          v-if="record.printerNo"
          type="primary"
          ghost
          size="small"
          class="_ml-10"
          @click="handleUnbinding(record)"
        >
          解绑
        </a-button>
        <a-button v-else type="primary" ghost size="small" class="_ml-10" @click="handleShowAddModal(record, 'bind')">
          绑定打印机
        </a-button>
        <a-button type="primary" ghost size="small" class="_ml-10" @click="handleDel(record.id)"> 删除 </a-button>
      </div>
    </s-table>

    <AddModal ref="addModal" :defaultOrganization="activityInfo.activityTenantId" @success="refresh" />
    <QrCodeModal ref="qrCodeModalRef"/>
  </div>
</template>

<script>
import { STable } from '@/components'
import AddModal from './addModal.vue'
import { actconfigList, actconfigDelete, deviceBind } from '@/api/activity/sign'
import DictTag from '@/components/DictTag'
import QrCodeModal from './QrCodeModal.vue'
export default {
  props: {
    titleKey: {
      type: String,
      default: ''
    },
    activityInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: {
    STable,
    AddModal,
    DictTag,
    QrCodeModal
  },
  data() {
    return {
      pagination: {
        current: 1,
        pageSize: 10
      },
      // 活动表单
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: 100
        },
        {
          title: '打印机名称',
          dataIndex: 'signName',
          width: 200
        },
        {
          title: '打印机编码',
          dataIndex: 'printerNo',
          width: 100
        },
        {
          title: '打印样式',
          dataIndex: 'printStyle',
          width: 120,
          ellipsis: true,
          scopedSlots: { customRender: 'printStyle' }
        },
        {
          title: '打印机状态',
          width: 120,
          ellipsis: true,
          scopedSlots: { customRender: 'terimalStatus' }
        },
        {
          title: '关联组织',
          dataIndex: 'assocTenantName',
          width: 120,
          ellipsis: true
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 150,
          ellipsis: true
        },
        {
          title: '操作',
          width: 350,
          fixed: 'right',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: parameter => {
        return actconfigList(
          Object.assign({
            current: parameter.pageNum,
            size: parameter.pageSize,
            activityId: this.$route.query.activityId
          })
        )
      }
    }
  },
  watch: {
    titleKey(val) {
      if (val === 'sign') {
        this.refresh()
      }
    }
  },
  methods: {
    handleShowAddModal(row, type) {
      this.$refs.addModal.openModel({
        row,
        type,
        activityName: this.activityInfo.title
      })
    },
    refresh() {
      this.$refs.table.refresh(false)
    },
    //删除签到码
    handleDel(id) {
      var _this = this
      this.$confirm({
        title: '删除?',
        content: '是否确定删除该签到码?',
        onOk: async () => {
          await actconfigDelete({ id })
          _this.$message.success(`删除成功`)
          _this.refresh()
        },
        onCancel() {}
      })
    },
    //下载二维码
 
    handleUnbinding(row) {
      var _this = this
      this.$confirm({
        title: '解绑?',
        content: '是否确定解绑该打印机?',
        onOk: async () => {
          await deviceBind({
            id: row.id,
            printerNo: row.printerNo,
            printStyle: 2,
            activityId: row.activityId,
            activityName: row.activityName,
            bindStatus: 0
          })
          _this.$message.success(`解绑成功`)
          _this.refresh()
        },
        onCancel() {}
      })
    }
  },
  created() {},
  mounted() {},
  activated() {
    this.refresh()
  }
}
</script>
<style scoped></style>
